<template>
	<view>
		<u-navbar title="开电子发票" :background="{background: '#fff'}" back-icon-color="#000" title-color="#000"
			:border-bottom="false">
		</u-navbar>
		<view class="title">发票详情</view>
		<u-form style="padding:0 40rpx;background: #FFFFFF;">
			<u-form-item label="发票类型" label-width="150">
				<view>电子发票(共1个行程)</view>
			</u-form-item>
			<u-form-item label="抬头类型" label-width="150">
				<u-radio-group v-model="radio">
					<u-radio active-color="#2D7AFE" name="企业单位">
						企业单位
					</u-radio>
					<u-radio active-color="#2D7AFE" name="个人/非企业">
						个人/非企业
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="发票抬头" label-width="150">
				<u-input v-model="taitou" type="text" placeholder="请输入发票抬头" />
			</u-form-item>
			<u-form-item label="税号" label-width="150" v-if="radio == '企业单位'">
				<u-input v-model="shuihao" type="text" placeholder="请输入税号" />
			</u-form-item>
			<u-form-item label="发票类容" label-width="150">
				<view>客运服务费</view>
			</u-form-item>
			<u-form-item label="发票金额" label-width="150">
				<view style="color: #3587F7;">36.00元</view>
			</u-form-item>
			<u-form-item label="备注信息" label-width="150">
				<u-input v-model="mark" type="text" placeholder="请输入备注信息(选填)" />
			</u-form-item>
		</u-form>
		<view class="title">收件人信息</view>
		<u-form style="padding:0 40rpx;background: #FFFFFF;">
			<u-form-item label="收件人" label-width="150">
				<u-input v-model="name" type="text" placeholder="请输入收件人" />
			</u-form-item>
			<u-form-item label="手机号码" label-width="150">
				<u-input v-model="mobile" type="text" placeholder="请输入手机号码" />
			</u-form-item>
			<u-form-item label="邮箱地址" label-width="150">
				<u-input v-model="email" type="text" placeholder="请输入邮箱地址" />
			</u-form-item>
		</u-form>
		<view class="btn">
			<text>提交电子发票申请</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radio: '企业单位',
				taitou: '',
				shuihao: '',
				mark: '',
				name: '',
				mobile: '',
				email: ''
			};
		}
	}
</script>

<style lang="scss">
	.title {
		padding: 20rpx 40rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}

	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 90%;
		height: 100rpx;
		background: linear-gradient(180deg, #3FA3F9 0%, #2D7BF7 100%);
		color: #FFFFFF;
		border-radius: 20rpx;
		font-size: 32rpx;
		margin: 20rpx auto;
	}
</style>
